// zoom
.zoom,.zoom-2{
    overflow: hidden;
    display: block;
    img{
        position: relative;
        width: percentage(1);
        @include scale(1);
        @include transition(all 0.3s ease-out 0.3s);
        @include transform-origin(center,center);
    }
    &:hover{
        img{
            @include scale(1.1);
        }
    }
}

// zoom 2
.zoom-2{
    img{
        @include transition(all 0.5s ease-out 0.5s);
    }
    &:hover{
        img{
            @include scale(1.1,1.1);
        }
    }
}


// filter grayscale
.filter-grayscale {
    @include transition(all 0.6s ease-out 0s);
    &:hover{
        @include filter(grayscale(100%));
    }
}

// filter brightness
.filter-brightness {
    @include transition(all 0.4s ease-out 0s);
    &:hover{
        @include filter(brightness(0.4));
    }
}

// filter blur
.filter-blur{
    @include transition(all 0.6s ease-out 0s);
    &:hover{
        @include filter(blur(5px));
    }
}

.tab-pane{
    @include animation-name(fadeInUp);
    @include animation-duration(0.7s);
    @include animation-fill-mode(both);
}

.close{
    .fa{
        @include transition(all 1s ease-in-out);
    }
    &:hover{
        .fa{
            @include rotate(360deg);
        }
    }
}
.carousel-fade {
  .carousel-inner {
    .item {
      opacity: 0;
      transition-property: opacity;
    }

    .active {
      opacity: 1;
    }

    .active.left,
    .active.right {
      left: 0;
      opacity: 0;
      z-index: 1;
    }

    .next.left,
    .prev.right {
      opacity: 1;
    }
  }

  .carousel-control {
    z-index: 2;
  }
}
